<template>
  <!--用户个人信息界面-->
  <div>
    <div class="profile"
         v-loading.fullscreen.lock="submitAliPay"
         element-loading-text="提交订单中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(256, 256, 256, 0.8)">
      <!--顶部消息-->
      <div class="profileTop">
        <!--        class="animate__animated animate__fadeInDown"-->
        <div class="profileTopItem animate__animated animate__fadeInLeft"
             v-for="(item,index) in profileThings"
             :style="{background:item.background}">
          <div class="topTitle">
            <span>{{ item.profileTitle }}</span>
          </div>
          <div class="topNumber">
            <span>{{ item.profileNumber }}条</span>
          </div>
        </div>
      </div>
      <div class="bottomLeft animate__animated animate__fadeInLeft">
        <span class="fontTitle">个人信息</span>
        <div class="userImg">
          <img :src="this.userContext.userImg"
               style="width: 100%;height: 100%;border-radius: 100%">
        </div>
        <div class="userContext">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="用户昵称">{{ userContext.name }}</el-descriptions-item>
            <el-descriptions-item label="账号">{{ userContext.username }}</el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-message"></i>
                用户邮箱
              </template>
              {{ userContext.userEmail }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                用户电话
              </template>
              {{ userContext.userTel ? userContext.userTel : '未绑定手机号' }}

            </el-descriptions-item>
            <el-descriptions-item label="操作">
              <el-button @click="openUpdate"
                         type="primary"
                         v-if="$store.state.noteList.openUpdateUser"
                         plain>修改信息
              </el-button>
              <el-button @click="openTel" type="primary" plain
                         v-if="!userContext.userTel && $store.state.noteList.openUseTel">绑定手机号
              </el-button>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="bottomRight animate__animated animate__fadeInRight">
        <span class="fontTitle">短信充值中心</span>
        <div class="depButton" v-for="(item,index) in deposit">
          <el-button style="width: 100%"
                     @click="userDeposit(index)"
                     :disabled="submitAliPay">
            {{ item.depositMoney }}元/{{ item.depositNumber }}次
          </el-button>
        </div>
        <!--        <div class="depButton">-->
        <!--          <el-input placeholder="自定义充值金额" class="depInput">-->
        <!--          </el-input>-->
        <!--        </div>-->
        <!--        <el-button class="sureDep">确定充值</el-button>-->
      </div>

    </div>
    <!--修改信息-->
    <el-dialog title="修改用户信息"
               width="400px"
               :modal-append-to-body="false"
               :show-close="false"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :visible.sync="showUpdateDialog">
      <el-form :model="userCache" label-width="80px">
        <div class="userImg">
          <el-upload
              class="avatar-uploader"
              :action="this.$axios.defaults.baseURL+'/noteUser/updateImg?userid='+this.$store.state.userContext.userid"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img :src="this.userContext.userImg"
                 style="width: 100%;height: 100%;border-radius: 100%">
          </el-upload>
        </div>

        <el-form-item label="用户昵称">
          <el-input v-model="userCache.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户账号">
          <el-input v-model="userCache.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱">
          <el-input v-model="userCache.userEmail" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showUpdateDialog = false">取 消</el-button>
        <el-button type="primary" @click="updateUserContext">确定修改</el-button>
      </div>
    </el-dialog>
    <!--绑定手机号-->
    <el-dialog title="绑定手机号"
               @close="clearCodeFrom"
               width="400px"
               :close-on-press-escape="false"
               :close-on-click-modal="false"
               :show-close="false"
               :modal-append-to-body="false"
               :visible.sync="showInsTelDialog">
      <el-form :model="codeForm"
               label-width="80px" class="demo-ruleForm">
        <el-form-item label="手机号">
          <el-input placeholder="请输入手机号"
                    maxlength="11"
                    :readonly="buttonDis"
                    v-model="codeForm.inputTel">
            <template slot="suffix">
              <el-button @click="getCode" :disabled="buttonDis">{{ buttonText }}</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-input placeholder="请输入4位验证码"
                    maxlength="4"
                    v-model="codeForm.inputCode">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showInsTelDialog = false">取 消</el-button>
        <el-button type="primary" @click="insertTel">确定绑定</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "userProfile",
  data() {
    return {
      showUpdateDialog: false, //是否展示修改
      showInsTelDialog: false, //是否展示绑定手机
      buttonDis: false,
      submitAliPay: false, //是否提交充值订单
      buttonText: '获取验证码',
      profileThings: [],
      userContext: {
        userid: '',
        userImg: '',
        username: '24654474568',
        name: '张三',
        userEmail: '15888888888@qq.com',
        userTel: '',
      },
      userCache: {
        userid: '',
        userImg: '',
        username: '',
        name: '',
        userEmail: '',
        userTel: '',
      },
      //验证码
      codeForm: {
        inputTel: '', //输入的手机号
        inputCode: '', //输入的验证码
      },
      deposit: [],
    }
  },
  methods: {
    //用户充值
    userDeposit(index) {
      this.submitAliPay = true;
      let payData = this.$qs.stringify({
        depositId: this.deposit[index].depositID,
        userid: this.$store.state.userContext.userid
      })
      this.$axios({
        url: '/noteOrder/addSmsResidue',
        method: 'POST',
        data: payData
      }).then(response => {
        const div = document.createElement('div');
        div.innerHTML = response.data;
        document.body.appendChild(div);
        document.forms[0].submit();
        this.submitAliPay = true;
      }).catch(error => {
        console.log(error);
      })
    },
    //修改用户信息
    updateUserContext() {
      let updData = this.$qs.stringify({
        name: this.userCache.name,
        userEmail: this.userCache.userEmail,
        userid: this.userCache.userid,
      });
      this.$axios({
        url: '/noteUser/updUser',
        method: 'PUT',
        data: updData
      }).then(response => {
        if (response.data.noteCode === 200) {
          this.$store.commit("setUserContext", response.data.noteClass); //提交全局
          this.$message({
            message: response.data.noteMessage,
            type: 'success'
          });
          this.userContext = this.userCache
          this.showUpdateDialog = false;// 关闭弹窗
        }
      }).catch(error => {
        console.log(error);
      })
    },
    //上传成功
    handleAvatarSuccess(res, file) {
      this.$message.success("修改成功")
      this.userContext.userImg = URL.createObjectURL(file.raw);
      //设置cookie
      let exdate = new Date()// 获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * 1)// 保存的天数
      window.document.cookie = 'userImg' + '=' + res.noteMessage + ';path=/;expires=' + exdate.toGMTString()
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt10M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      return isJPG && isLt10M;
    },
    //打开更新
    openUpdate() {
      this.userCache.name = this.userContext.name;
      this.userCache.userEmail = this.userContext.userEmail;
      this.userCache.username = this.userContext.username;
      this.userCache.userid = this.userContext.userid;
      this.showUpdateDialog = !this.showUpdateDialog;
    },
    openTel() {
      this.showInsTelDialog = !this.showInsTelDialog
    },
    //获取验证码
    getCode() {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
      if (!this.codeForm.inputTel) {
        this.$message.error('电话号码不能为空');
        return;
      }
      setTimeout(() => {
        if (!phoneReg.test(this.codeForm.inputTel)) {
          this.$message.error('输入正确的电话号码');
        } else {
          //获取验证码倒计时
          this.buttonDis = true;//按钮设置为不可点击
          let time = 60;  //设置时间
          let set_name = setInterval(() => {
            this.buttonText = "获取验证码" + time + "s";
            time--;
            if (time === 0) {
              clearInterval(set_name);
              this.buttonDis = false;
              this.buttonText = "重新获取验证码";
            }
          }, 1000);
        }
        //发送验证码
        let telData = this.$qs.stringify({
          userid: this.$store.state.userContext.userid,
          userTel: "+86" + this.codeForm.inputTel
        })
        this.$axios({
          url: '/noteUser/sendTel',
          method: 'POST',
          data: telData
        }).then(response => {
          console.log(response.data);
          //发送成功提示用户 失败 清空气态defbuff
        }).catch(error => {
          this.$message.error("请求超时...")
        })

      }, 100)
    },
    //清空绑定手机
    clearCodeFrom() {
      this.codeForm = {
        inputTel: '', //输入的手机号
        inputCode: '', //输入的验证码
      }
    },
    //确定绑定
    insertTel() {
      if (!this.codeForm.inputTel) {
        this.$message.error('电话号码不能为空');
        return;
      }
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
      if (!phoneReg.test(this.codeForm.inputTel)) {
        this.$message.error('输入正确的电话号码');
        return;
      }
      if (!this.codeForm.inputCode) {
        this.$message.error("验证码不能为空")
        return;
      }
      if (this.codeForm.inputCode.length !== 4) {
        this.$message.error("请输入4位数验证码")
      }
      let insertTel = this.$qs.stringify({
        userid: this.$store.state.userContext.userid,
        userTel: "+86" + this.codeForm.inputTel,
        inputCode: this.codeForm.inputCode
      })
      this.$axios({
        url: '/noteUser/insertUserTel',
        method: 'POST',
        data: insertTel,
      }).then(response => {
        if (response.data.noteCode === 200) {
          this.userContext.userTel = "+86" + this.codeForm.inputTel;
          this.$store.commit("setUserContext", this.userContext);
          this.$message.success(response.data.noteMessage);
          this.showInsTelDialog = false; //关闭界面
        }
      }).catch(error => {
        this.$message.error("请求超时...")
      })
    },
    //获取后端的充值信息
    getDeposit() {
      this.$axios({
        url: '/deposit/queryAllDep',
        method: 'GET',
      }).then(response => {
        // console.log(response.data);
        if (response.data.noteCode === 200) {
          this.deposit = response.data.noteClass;
        }
      }).catch(error => {
        this.$message.error("请求超时....")
      })
    },
    //获取用户的发送信息
    getNoteEmail() {
      let getData = this.$qs.stringify({
        sendState: 1,
        userid: this.$store.state.userContext.userid,
        noteType: 0,
      })
      this.$axios({
        url: '/noteEmail/queryAllNEByUID',
        method: 'PUT',
        data: getData
      }).then((response => {
        // console.log(response.data)
        if (response.data.noteCode === 200) {
          this.profileThings.push(response.data.noteClass);
        }
      }))
    },
    //获取用户短信发送数量
    getNoteTel() {
      let getData = this.$qs.stringify({
        sendState: 1,
        userid: this.$store.state.userContext.userid,
        noteType: 1,
      })
      this.$axios({
        url: '/noteEmail/queryAllNEByUID',
        method: 'PUT',
        data: getData
      }).then((response => {
        // console.log(response.data)
        if (response.data.noteCode === 200) {
          this.profileThings.push(response.data.noteClass);
        }
      }))
    },
    //获短信剩余数量
    getTelResidue() {
      this.$axios({
        url: '/userNoteInfo/getTelResidue/' + this.$store.state.userContext.userid,
        method: 'GET',
      }).then((response => {
        // console.log(response.data)
        if (response.data.noteCode === 200) {
          this.profileThings.push(response.data.noteClass);
        }
      }))
    },
    //获取待做事件数量
    getNoteNoPunch() {
      this.$axios({
        url: '/userThings/getNoPunch/' + this.$store.state.userContext.userid,
        method: 'GET',
      }).then((response => {
        // console.log(response.data)
        if (response.data.noteCode === 200) {
          this.profileThings.push(response.data.noteClass);
        }
      }))
    },
  },
  mounted() {
    this.userContext = this.$store.state.userContext;
    this.profileThings = [];
    this.getDeposit() //获取充值信息
    this.getNoteEmail(); //互殴去成功发送邮箱数量
    this.getNoteTel(); //获取成功发送短信数量
    this.getTelResidue(); //获取短信剩余数量
    this.getNoteNoPunch();
  }
}
</script>

<style scoped>
.profile {
  width: 100%;
  height: 700px;
  /*background-color: #ffcdd2;*/
}

.profileTop {
  width: 96%;
  height: 20%;
  /*background-color: #ffcdd2;*/
  float: left;
}

.profileTopItem {
  width: 20%;
  height: 100%;
  background-color: #ffffff;
  float: left;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border-radius: 30px;
  margin-right: 5%;
  transition:all 0.5s;
}
.profileTop>>>.profileTopItem:hover{
  transform: scale(1.1);
}
.topTitle {
  width: 100%;
  height: 30%;
  border-bottom: 1px solid #cccccc;
  border-radius: 30px 30px 0px 0px;
  font-size: 20px;
  color: #303133;
  text-align: center;
  line-height: 200%;
}


.topNumber {
  width: 100%;
  height: 70%;
  border-radius: 0px 0px 30px 30px;
  font-size: 40px;
  color: #606266;
  text-align: center;
  line-height: 200%;
}

.bottomLeft, .bottomRight {
  width: 40%;
  border-radius: 30px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  margin-top: 5%;
  float: left;
}

.bottomRight {
  float: right;
  margin-right: 9%;
  height: 40%;
}

.fontTitle {
  font-size: 20px;
  color: #606266;
  display: block;
  margin-top: 18px;
  text-indent: 33px;
  margin-bottom: 18px;
}

.userImg {
  width: 100px;
  height: 100px;
  background: #cccccc;
  margin: 10px auto;
  border-radius: 100px;
}

.userImg img {
  width: 100%;
  height: 100%;
}

.depButton {
  width: 27%;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  float: left;
}

.sureDep {
  width: 88%;
  margin-top: 20px;
  margin-left: 20px;
}

.userContext {
  width: 80%;
  margin-left: 10%;
  margin-bottom: 10%;
}
</style>
